<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!--
    reactive: 让引用类型的数据具备响应式
        - 对象格式
        - 数组格式
-->

<body>
    <div id="app"></div>
    <div id="modal"></div>
</body>
<script src="js/vue.js"></script>
<script>

    const app = Vue.createApp({
        setup(props, context){
            // 第一步： 引入 reactive
            const {reactive} = Vue;

            // 第二步：通过 reactive 包装数据
            let obj = reactive({"name":"Tim", "sex":"男"}); // 控制台输入 app.obj.name = 'Tom'
            let array = reactive(['Vue', 'Java', 'React']); // 控制台输入 app.array.push('Java')

            // 引用类型值
            setTimeout( ()=>{
                // 引用对象可以直接操作对应的值，和基础类型不一样
                obj.name = "ref 属性";
                array[0] = 'Vue3';
            }, 2000);

            return {
                msg: '组合式API - reactive',
                obj,
                array,
            }
        },
       
        template: `
        <div class="box">
          <h3> {{msg}} </h3>
          <div> 姓名：{{obj.name}},  性别: {{obj.sex}} </div>
          <div>{{array}}</div>
        </div>
        `,
    }).mount("#app");

</script>

</html>